import React from 'react';
import styles from './Orders.css';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Form, Button, Menu, Dropdown, Icon } from 'antd';
import { PAGE_SIZE } from '../../constants';
import { routerRedux } from 'dva/router';
import AdvancedSearchForm from './Form';

function Orders({ dispatch, list: dataSource, loading, total, page: current }) {
    function deleteHandler(id) {
        dispatch({ type: 'orders/remove', payload: { id } });
    }

    function pageChangeHandler(page) {
        dispatch(routerRedux.push({
            pathname: '/orders',
            query: { page }
        }));
    }

    function handleMenuClick(e) {
      console.log('click', e);
    }

    function expandedRowRender({ details }) {
        const columns = [
            { title: '序號', key: 'detail_index', render: (txt, row, idx)=>idx+1 },
            { title: '服務/產品', dataIndex: 'item.name', key: 'item_name' },
            { title: '價格', dataIndex: 'item.price', key: 'item_price' },
        ];
        return (
          <Table
            columns={columns}
            dataSource={details}
            pagination={false}
          />
        );
    }

    const columns = [
      {
        title: '订单号',
        dataIndex: 'order_no',
        key: 'order_no',
      },
      {
        title: '会员',
        dataIndex: 'user.name',
        key: 'user_name',
      },
      {
        title: '手机',
        dataIndex: 'user.mobile',
        key: 'user_mobile',
      },
      {
        title: '车牌号',
        dataIndex: 'user.license',
        key: 'user_license',
      },
      {
        title: '停车地点',
        dataIndex: 'user.address',
        key: 'user_address',
      },
      {
        title: '訂單時間',
        dataIndex: 'order_time',
        key: 'order_time',
      },
      {
        title: '状态',
        dataIndex: 'status_txt',
        key: 'status_txt',
        render: (text, record) => {
            const colors = {'-1': 'cancel', '0': 'notpay', '1': 'pay', '2': 'process', '3': ''};
            const className = [styles.status, styles[colors[record.status]]].join(' ');
            return (<div><span className={className}>●</span>{text}</div>);
        }
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, { id }) => (
          <span className={styles.operation}>
            <a href="">查看</a>
            <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, id)}>
              <a href="">删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User',    // Column configuration not to be checked
      }),
    };

    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">1st item</Menu.Item>
        <Menu.Item key="2">2nd item</Menu.Item>
        <Menu.Item key="3">3rd item</Menu.Item>
      </Menu>
    );

    return (
      <div className={styles.normal}>

        <div className={styles['form-wrap']}>
          <AdvancedSearchForm />
        </div>

        <div>共搜索到 {total} 条数据</div>

        <div className={styles['button-wrap']}>
          <Button type="primary">添加项目</Button>
          <Button>批量操作</Button>
          <Dropdown overlay={menu}>
            <Button>
              更多操作 <Icon type="down" />
            </Button>
          </Dropdown>
        </div>

        <div className={styles.clear}>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            rowKey={record => record.id}
            expandedRowRender={expandedRowRender}
            pagination={false}
          />
          <Pagination
            className="ant-table-pagination"
            total={total}
            current={current}
            pageSize={PAGE_SIZE}
            onChange={pageChangeHandler}
          />
        </div>
      </div>
    );
}

function mapStateToProps(state) {
  const { list, total, page } = state.orders;
  return {
    list,
    total,
    page,
    loading: state.loading.models.orders,
  };
}

export default connect(mapStateToProps)(Orders);
